import { dataValue, geoCoordMap } from '@/utils/map/city.js'

export const useMapHook = () => {
  const convertData = function (data) {
    const res = []
    for (let i = 0; i < data.length; i++) {
      const geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        })
      }
    }
    return res
  }
  const formatterData = (type) => {
    // 切换地图类型 处理数据
    if (type === 'china') {
      return convertData(dataValue)
    } else if (type === 'world') {
      return [
        {
          name: '美国',
          value: [137.237305, -25.629492, 200],
        },
      ]
    }
  }
  //   // // 自定义点位图标-经纬度数据
  // const seriesList = [
  //   {
  //     icon: new URL(`../assets/click.png`, import.meta.url).href,
  //     name: "在线车辆",
  //     data: [
  //       {
  //         value: [106.9, 27.7],
  //         itemStyle: { color: "#41b75f" },
  //       },
  //       {
  //         value: [115.29, 27.32],
  //         itemStyle: { color: "#41b75f" },
  //       },
  //     ],
  //   },
  //   {
  //     icon: new URL(`../assets/click.png`, import.meta.url).href,
  //     name: "离线车辆",
  //     data: [
  //       {
  //         value: [126.04, 27.03],
  //         itemStyle: { color: "rgb(243, 177, 83)" },
  //       },
  //       {
  //         value: [97.82, 20.58],
  //         itemStyle: { color: "rgb(243, 177, 83)" },
  //       },
  //     ],
  //   },
  //   {
  //     icon: new URL(`../assets/click.png`, import.meta.url).href,
  //     name: "故障车辆",
  //     data: [
  //       {
  //         value: [104.82, 26.58],
  //         itemStyle: { color: "rgb(238, 80, 80)" },
  //       },
  //     ],
  //   },
  // ];
  // const series = seriesList.map((v) => {
  //   return {
  //     type: "scatter", //配置显示方式为用户自定义
  //     coordinateSystem: "geo",
  //     symbol: "image://" + v.icon, //image://前缀是ECharts识别图像URL的约定
  //     symbolSize: 20,
  //     data: v.data,
  //   };
  // });

  const getOptions = (type) => {
    // const mapName = type === "china" ? "china" : "world";
    const option = {
      tooltip: {
        trigger: 'item',
      },
      geo: {
        tooltip: {
          show: true,
          borderWidth: 0, //避免设置点位为有边框色
          backgroundColor: 'rgba(50,50,50,0.7)',
          formatter: (data) => {
            return `<div class="chart-tooltip-item-container">
                      <div class="title">${data.name}</div>
                      <div class="item">
                        <span class="dot blue"></span>
                        <span class="name">总点击量（人次）：</span>
                        <span class="number">4098</span>
                      </div>
                      <div class="item">
                        <span class="dot green"></span>
                        <span class="name">观看用户总数：</span>
                        <span class="name">373</span>
                      </div>
                      <div class="item">
                        <span class="dot orange"></span>
                        <span class="name">观看总时长（分）</span>
                        <span class="number">10203</span>
                      </div>
                    </div>`
          },
        },
        label: {
          color: '#000',
          show: type == 'world' ? false : true, //是否显示地图省份得名称
        },
        itemStyle: {
          areaColor: '#d1e7fd', //地图默认的颜色
          borderColor: '#000',
          color: '#000',
        },
        emphasis: {
          itemStyle: {
            areaColor: '#238af6', // 鼠标悬浮颜色
          },
          label: {
            //鼠标悬浮时的label
            show: true,
            color: '#fff',
            fontSize: 13,
          },
        },

        map: type,
        roam: true, //是否开启鼠标缩放和平移漫游
      },
      animationDuration: 1000,
      animationEasing: 'cubicOut',
      animationDurationUpdate: 1000,
      // series: series,
      series: [
        {
          type: 'effectScatter', //显示带有动画效果的点
          coordinateSystem: 'geo', //
          data: formatterData(type),
          symbolSize: function (val) {
            // 红色圆圈大小
            return val[2] / 10
          },
          encode: {
            value: 2,
          },
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
          },
          label: {
            // 圆圈旁边文字 目前不显示
            formatter: '{b}',
            position: 'right',
            show: true,
          },
          itemStyle: {
            color: 'red',
            shadowBlur: 10,
            shadowColor: 'red',
          },
          zlevel: 1,
        },
      ],
      // visualMap: {
      //显示图例，用于自定义点位图标，使用自定义，  type: "effectScatter",显示带有动画效果的点失效
      //   // 设置地图范围值显示的颜色
      //   selectedMode: false, // 不能选择
      //   hoverLink: false, // 取消鼠标移入效果
      //   textStyle: {
      //     color: "#86909C",
      //     fontSize: 12,
      //   },
      //   orient: "horizontal",
      //   itemGap: 10,
      //   itemWidth: 10,
      //   itemHeight: 10,
      //   pieces: [  //用于定义数据映射的区间和对应的视觉表现
      //     {
      //       gt: 0.9,
      //       lte: 1, // 表示大于0.9且小于等于1的数值映射为绿色
      //       label: "在线车辆",
      //       color: "#41B75F",
      //     },
      //     {
      //       gte: 0.8,
      //       lte: 0.9,
      //       label: "离线车辆",
      //       color: "#F3B153",
      //     },
      //     {
      //       lt: 0.8,
      //       label: "故障车辆",
      //       color: "#EE5050",
      //     },
      //   ],
      //   top: 0,
      //   left: 0,
      // },
    }
    return option
  }
  return { getOptions }
}
